﻿@page "/docs/extensions/lottie-animation"

<Seo Canonical="/docs/extensions/lottie-animation" Title="Blazorise Lottie Animation Component" Description="Learn to use and work with the Blazorise Lottie Animation component, a component used to embed JSON-based Lottie animations." />

<DocsPageTitle Path="Extensions/LottieAnimation">
    Blazorise Lottie Animation Component
</DocsPageTitle>

<DocsPageLead>
    A <Code>LottieAnimation</Code> component used to embed JSON-based <Anchor To="https://airbnb.io/lottie/" Title="Link to lottie documentation" Target="Target.Blank">Lottie</Anchor> animations.
</DocsPageLead>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="LottieAnimationNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ImportLottieAnimationExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        To embed an animation you just need to define the <Code>Path</Code> of the animation.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicLottieAnimationExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicLottieAnimationExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Best Practices
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Fixed Height
</Heading>

<DocsPageParagraph>
    While the animation will work fine without it, it is advised to define a fixed height, eg. <Code Tag>LottieAnimation Style="height: 250px;"</Code>. That way, the user can see the loading animation until the component is fully loaded.
</DocsPageParagraph>

<ComponentApiDocs ComponentTypes="[typeof(LottieAnimation)]" />